<html>



<head>
    <meta charset="utf-8">
    <title>放置文章标题</title>
    <style>
        /* 本页的css样式表 */
        .reveal * {
            display: none;
        }

        /* 除了class = "handle" 的元素的子元素都不显示 */
        .reveal *.handle {
            display: block;
        }

        /* 除了class= "handle的元素"*/
    </style>
</head>

<script>
    var elements = document.getElementsByClassName("reveal");
    // 所有的页面逻辑在onload事件之后启动
    window.onload = function () {
        var elements = document.getElementsByClassName("reveal");
        for (let i = 0; i < elements.length; i++) {
            console.log(elements);
            var elt = elements[i];
            console.log(elt);
            // 找到容器中的"handle"元素
            var title = elt.getElementsByClassName("handle")[0];
            console.log(title);
            // 当单击这个元素时，呈现剩下的内容
            addRevealHandler(title, elt);

            function addRevealHandler(title, elt) {
                title.onclick = function () {
                    if (elt.className == "reveal") {
                        elt.className = "revealed";
                    } else if (elt.className = "revealed") {
                        elt.className = "reveal";
                    }
                }
            }

        }
    }
</script>

<body>
    <div class="reveal">
        <h1 class="handle">Click here to Reveal Hidden Text</h1>
        <p>This paragraph is hidden. It apperars when you click on the title</p>
    </div>
    <script>
        var elements = document.getElementsByClassName("reveal")[0];
    </script>
</body>

</html>